<template>
	<view class="page-container">
		<!-- <wd-tabs v-model="currentTab" custom-class="tabs" autoLineWidth>
			<block v-for="item in tabsList" :key="item">
				<wd-tab :title="`${item.label}`" :name="item.value"> -->
					<view class="list-wrapper">
						<view class="list-card" v-for="(item, index) in list" :key="index">
							<view class="card-head">
								<view class='order-no'>
									<text class="label">订单编号:</text>
									<text class="value">{{ item.title }}</text>
								</view>
								<view class='order-status'>{{ item.order_status_title }}</view>
							</view>
							<view class="card-main">
								<view class="goods-wrapper">
									<image class="goods-pic" src="/static/imgs/goods-pic.png">
									</image>
									<view class='goods-summary'>
										<view class="goods-sumary-title">我的优惠福利</view>
										<view class="goods-sumary-text">微信支付自动抵扣</view>
										<view class="goods-sumary-text">
											领取后自动存入微信卡包
										</view>
									</view>
								</view>
							</view>
							<view class="card-foot">
								<view style="flex:1;">合计
									<text style="color: #f00;font-weight: bold;">¥ {{ item.order_total_amount }}</text>
								</view>

								<wd-button type="text" style="margin-right:32rpx"
									v-if="item.order_status == 1" @click="handleOrderDetail(item.id)">
									订单疑问/售后
								</wd-button>

								<wd-button @click="handleOrderDetail(item.id)" size="medium">查看详情</wd-button>

							</view>
						</view>

					</view>
		<!-- 		</wd-tab>
			</block>
		</wd-tabs> -->
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		apiOrderList
	} from "@/api/order";
	//页面加载
	onLoad(() => {
		getOrderList();
	});
	const tabsList = ref([{
			label: '全部',
			value: 0
		},
		{
			label: '待支付',
			value: 1
		},
		{
			label: '已支付',
			value: 2
		},
	]);
	const currentTab = ref(0);
	const list = ref([]);
	//获取订单列表
	const getOrderList = async () => {
		list.value = await apiOrderList();
	}
	//查看详情
	const handleOrderDetail = (id) =>{
		uni.navigateTo({
			url: '/pages/order/details?order_id=' + id
		});
	}
</script>

<style scoped>
	.page-container {
		padding: 0;

	}

	.tabs {
		.wd-tabs__nav {
			height: 78rpx;
		}

		.wd-tabs__nav-item {
			font-size: 34rpx !important;
		}

	}

	.list-wrapper {
		background: #f8f8f8;
		height: calc(100vh - 130rpx);
		padding: 20rpx;
	}

	.list-card {
		margin: 0 0 20rpx 0;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.card-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.order-no {
		font-size: 28rpx;
	}

	.order-no .label {
		color: #333;
	}

	.order-no .value {
		color: #333;
		margin-left: 10rpx;
	}

	.order-status {
		color: #1989fa;
		font-size: 28rpx;
	}

	.card-main {
		padding: 16rpx 24rpx;
		background: #fff;
	}

	.goods-wrapper {
		display: flex;
		align-items: center;
	}

	.goods-pic {
		width: 160rpx;
		height: 160rpx;
	}

	.goods-summary {
		flex: 1;
		margin-left: 20rpx;
	}

	.goods-sumary-title {
		font-size: 32rpx;
		color: #000;
		margin-bottom: 16rpx;
	}

	.goods-sumary-text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.card-foot {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 20rpx;
		border-top: 1rpx solid #f5f5f5;
	}
</style>